{% extends 'base_backend.html' %}
{% load static admin_static i18n %}
{% load zhongbao_admin_filtets %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <link rel="stylesheet" href="{% static 'public/CodeMirror/lib/codemirror.css' %}">
    <link rel="stylesheet" href="{% static 'public/CodeMirror/theme/lesser-dark.css' %}">
{% endblock header_tail %}

{% block section_content %}
    <div>
        <div class="box-header with-border">
            <h3><span id="config_name">{{ name }}</span> 修改历史</h3>
            <p id="config_file_name" class="no-display">{{ file_name }}</p>
        </div>
        <!-- form start -->
        <div class="box box-primary">
            <div class="box-body">
                <div class="box-footer">

                    <table class="table table-striped" id="change_his_table">
                        <tr>
                            <th>操作人</th>
                            <th>操作类型</th>
                            <th>时间</th>
                            <th>修改信息</th>
                        </tr>
                        {% for history in history_list %}
                            <tr class="chang_config_tr">
                                <td>{{ history.history_user }}</td>
                                <td>{{ history.history_type }}</td>
                                <td>{{ history.history_date }}</td>
                                <td class="change_version">
                                    {% for i in history.change_field_list %}
                                        <p>{{ i }}</p>
                                    {% endfor %}
                                </td>
                            </tr>
                        {% endfor %}
                    </table>

                </div>
            </div>
        </div>
    </div>
{% endblock section_content %}

{% block body_js %}
    {{ block.super }}
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });
        var body = $('body');
        body.append("<pre><div id='DiffBox'></div></pre>");
        var DiffBox = $('#DiffBox');
        body.append("<div id='mask'></div>");

        $(document).ready(function () {

            $('.chang_config_tr').hover(function () {
                    var note = $(this).find('.change_diff_a');
                    note.removeClass('no-display');
                }, function () {
                    var note = $(this).parent().find('.change_diff_a');
                    note.addClass('no-display');
                }
            );
        });

        $('.change_diff_a').click(function () {
            DiffBox.children().remove();
            var next_tr = $(this).closest('tr').next();
            var w_height = $(window).height();
            var w_width = $(window).width();
            var wrapper = $('.wrapper');
            var v1 = $(this).parent().prev().text();
            var v2 = next_tr.find('.change_version').text();
            if (next_tr.length == 0) {
                v2 = 'none'
            };
            var name = $('#config_file_name').text();
            wrapper.css('z-index', 2);
            /*重要，z-index底层对照*/
            $.post({
                data: {'name': name, 'v1': v1, 'v2': v2},
                url: "{% url 'maintain:change_config_diff' %}",
                success: function (data, statusText, xmlHttpRequest) {
                    $.each(data, function (index, item) {
                        var p_tag = $(document.createElement('p'));
                        p_tag.text(item);
                        DiffBox.append(p_tag);
                    });
                    $("#mask").addClass("mask").fadeIn();
                    DiffBox.fadeIn();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(textStatus)
                },
                dataType: 'json'
            });
            return false
        });

        var mask = $('#mask');
        mask.click(function () {
            if (DiffBox.css('display') == 'block') {
                DiffBox.fadeOut();
                mask.fadeOut();
            }
        })


    </script>

{% endblock body_js %}